<template>
  <view class="search-bar">
    <view class="search-input">
      <text class="search-icon">🔍</text>
      <input 
        type="text" 
        :placeholder="placeholder"
        v-model="searchText"
        @input="handleInput"
        @confirm="handleSearch"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  placeholder: {
    type: String,
    default: '搜索'
  }
})

const emit = defineEmits(['search'])

const searchText = ref('')

const handleInput = () => {
  // 实时搜索可以在这里处理
}

const handleSearch = () => {
  emit('search', searchText.value)
}
</script>

<style scoped>
.search-bar {
  padding: 20rpx;
  background: #ff6b35;
}
.search-input {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 50rpx;
  padding: 20rpx 30rpx;
}
.search-icon {
  margin-right: 20rpx;
  color: #999;
}
input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 28rpx;
}
</style>
